<template>
	<el-dialog :title="roleInfo.name + '-用户权限设置'" v-model="visible" :width="500" destroy-on-close
		@closed="$emit('closed')">
		<el-tabs tab-position="top">
			<el-tab-pane label="菜单权限">
				<div class="treeMain">
					<el-tree ref="menu" node-key="id" :default-expanded-keys="defaultExpandedKeys" :data="menu.list"
						:props="menu.props" show-checkbox></el-tree>
				</div>
			</el-tab-pane>
			<!--
			<el-tab-pane label="数据权限">
				<el-form label-width="100px" label-position="left">
					<el-form-item label="规则类型">
						<el-select v-model="data.dataType" placeholder="请选择">
							<el-option label="全部可见" value="1"></el-option>
							<el-option label="本人可见" value="2"></el-option>
							<el-option label="所在部门可见" value="3"></el-option>
							<el-option label="所在部门及子级可见" value="4"></el-option>
							<el-option label="选择的部门可见" value="5"></el-option>
							<el-option label="自定义" value="6"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="选择部门" v-show="data.dataType=='5'">
						<div class="treeMain" style="width: 100%;">
							<el-tree ref="dept" node-key="id" :data="data.list" :props="data.props"
								show-checkbox></el-tree>
						</div>
					</el-form-item>
					<el-form-item label="规则值" v-show="data.dataType=='6'">
						<el-input v-model="data.rule" clearable type="textarea" :rows="6"
							placeholder="请输入自定义规则代码"></el-input>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="控制台模块">
				<div class="treeMain">
					<el-tree ref="grid" node-key="key" :data="grid.list" :props="grid.props"
						:default-checked-keys="grid.checked" show-checkbox></el-tree>
				</div>
			</el-tab-pane>
			<el-tab-pane label="控制台">
				<el-form label-width="100px" label-position="left">
					<el-form-item label="控制台视图">
						<el-select v-model="dashboard" placeholder="请选择">
							<el-option v-for="item in dashboardOptions" :key="item.value" :label="item.label"
								:value="item.value">
								<span style="float: left">{{ item.label }}</span>
								<span style="float: right; color: #8492a6; font-size: 12px">{{ item.views }}</span>
							</el-option>
						</el-select>
						<div class="el-form-item-msg">用于控制角色登录后控制台的视图</div>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		 -->
		</el-tabs>
		<template #footer>
			<el-button @click="visible=false">取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				visible: false,
				isSaveing: false,
				menu: {
					list: [],
					checked: [],
					props: {
						label: (data) => {
							return data.meta.title
						}
					}
				},
				grid: {
					list: [],
					checked: ["welcome", "ver", "time", "progress", "echarts", "about"],
					props: {
						label: (data) => {
							return data.title
						},
						disabled: (data) => {
							return data.isFixed
						}
					}
				},
				data: {
					dataType: "1",
					list: [],
					checked: [],
					props: {},
					rule: ""
				},
				dashboard: "0",
				dashboardOptions: [{
						value: '0',
						label: '数据统计',
						views: 'stats'

					},
					{
						value: '1',
						label: '工作台',
						views: 'work'
					},
				],
				roleInfo: {
					units: [],
				},
				pages:{
					page:1,
					pagesize:100
				}
			}
		},
		mounted() {
			this.getMenu()
			// this.getDept()
			// this.getGrid()

		},
		methods: {
			open(item) {
				this.visible = true;
				this.roleInfo = item
				console.log(this.roleInfo,22)
			},
			submit() {
				this.isSaveing = true;
				let stores = []
				if (this.roleInfo.stores.length) {
					this.roleInfo.stores.forEach(item => {
						stores.push({
							id: item.id
						})
					})
				} else {
					stores = null
				}

				let roles = []
				if (this.roleInfo.roles && this.roleInfo.roles.length) {
					this.roleInfo.roles.forEach(item => {
						roles.push({
							id: item
						})
					})
				} else {
					roles = null
				}
				//选中的和半选的合并后传值接口
				var checkedKeys = this.$refs.menu.getCheckedKeys().concat(this.$refs.menu.getHalfCheckedKeys())
				let _arr = []
				checkedKeys.forEach(item => {
					_arr.push({
						id: item
					})
				})
				// var checkedKeys_dept = this.$refs.dept.getCheckedKeys().concat(this.$refs.dept.getHalfCheckedKeys())
				// console.log(checkedKeys_dept)

				let data = {
					account: this.roleInfo.account,
					name: this.roleInfo.name,
					password: this.roleInfo.password,
					mobilePhone: this.roleInfo.mobilePhone,
					unit: {
						id: this.roleInfo.unit ? this.roleInfo.unit.id : null
					},
					dept: {
						id: this.roleInfo.dept
					},
					stores: stores,
					roles: roles,
					action: this.roleInfo.action ? this.roleInfo.action : null,
					menus: _arr,
				}
				const res = this.$API.system.user.save.post(data)
				if (res.code == 200) {
					setTimeout(() => {
						this.isSaveing = false;
						this.visible = false;
						this.$message.success("操作成功")
						this.$emit('success')
					}, 1000)
				}else{
					this.isSaveing = false;
				}

			},
			async getMenu() {
				var res = await this.$API.system.menu.list.post(this.pages)
				this.menu.list = res.data

				//获取接口返回的之前选中的和半选的合并，处理过滤掉有叶子节点的key
				this.roleInfo.menus.map(item => {
					this.menu.checked.push(item.id)
				})
				console.log(this.menu.checked)
				//获取所有选中的子节点
				let checkedKeys = this.$refs['menu'].getCheckedKeys()
				//获取所有选中的父节点（半选中）
				let hafCheckedKeys = this.$refs['menu'].getHalfCheckedKeys()
				//组合
				checkedKeys.concat(hafCheckedKeys)

				//回显this.selectIds 是后台返回的所有选中节点的id
				this.$nextTick(() => {
					this.menu.checked.forEach((i) => {
						var node = this.$refs['menu'].getNode(i);
						if (node.isLeaf) {
							this.$refs['menu'].setChecked(node, true)
						}
					})
				})


				// this.menu.checked = ["system", "user", "user.add", "user.edit", "user.del", "directive.edit", "other",
				// 	"directive"
				// ]
				// this.$nextTick(() => {
				// 	let filterKeys = this.menu.checked.filter(key => this.$refs.menu.getNode(key).isLeaf)
				// 	this.$refs.menu.setCheckedKeys(filterKeys, true)
				// })
			},
			async getDept() {
				var res = await this.$API.system.dept.list.post();
				this.data.list = res.data
				this.data.checked = ["12", "2", "21", "22", "1"]
				this.$nextTick(() => {
					let filterKeys = this.data.checked.filter(key => this.$refs.dept.getNode(key)
						.isLeaf)
					this.$refs.dept.setCheckedKeys(filterKeys, true)
				})
			},
			getGrid() {
				this.grid.list = [{
						key: "welcome",
						title: "欢迎",
						isFixed: true
					},
					{
						key: "ver",
						title: "版本信息",
						isFixed: true
					},
					{
						key: "time",
						title: "时钟"
					},
					{
						key: "progress",
						title: "进度环"
					},
					{
						key: "echarts",
						title: "实时收入"
					},
					{
						key: "about",
						title: "关于项目"
					}
				]
			}
		}
	}
</script>

<style scoped>
	.treeMain {
		height: 280px;
		overflow: auto;
		border: 1px solid #dcdfe6;
		margin-bottom: 10px;
	}
</style>
